<template>
  <div class='container'>
    <!-- 组题列表组件 -->
    <el-card>
      <!-- 卡片视图头部区域 -->
      <el-form>
        <el-row>
          <el-col :span='6'>
            <el-form-item label='关键字'>
              <el-input
                v-model='queryInfo.keyword'
                class='searchInput'
                size='small'
                placeholder='根据编号搜索'
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6' :offset='12'>
            <el-form-item class='header-right'>
              <el-button size='small' @click='clearKeyword'>清除</el-button>
              <el-button
                type='primary'
                size='small'
                @click="loadTableData"
              >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class='error'>
        <el-alert
          :title='`共有 ${total} 条数据`'
          type='info'
          show-icon
          :closable='false'
        >
        </el-alert>
      </div>
      <!-- /卡片视图头部区域 -->
      <!-- 卡片视图主体区域 -->
      <!-- 表格部分 -->
      <el-table
        :data='tableData'
        style='width: 100%'
        stripe
        :header-cell-style="{'text-align':'left'}"
        :cell-style="{'text-align':'left'}"
      >
        <el-table-column type='index' label='#'></el-table-column>
        <el-table-column prop='id' label='编号' width='180'></el-table-column>
        <el-table-column label='题型' width='80'>
          <template slot-scope='scope'>
            <!-- {{ scope.row }} -->
            <span v-show="scope.row.questionType === '1'">单选</span>
            <span v-show="scope.row.questionType === '2'">多选</span>
            <span v-show="scope.row.questionType === '3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column label='题目编号'  width='220' show-overflow-tooltip>
          <template slot-scope='scope'>
            <!-- {{ scope.row.questionIDs }} -->
            <div v-for='item in scope.row.questionIDs' :key='item.number'>
              <a
                href='javascript:'
                class='link'
                @click='openlinks(item.id)'
              >{{ item.number }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='addTime' label='录入时间' width='180'></el-table-column>
        <el-table-column prop='totalSeconds' label='答题时间(s)'></el-table-column>
        <el-table-column prop='accuracyRate' label='正确率(%)'></el-table-column>
        <el-table-column prop='userName' label='录入人' width='155'></el-table-column>
        <el-table-column label='操作'>
          <template slot-scope='scope'>
            <!-- {{ scope.row }} -->
            <el-button
              type='danger'
              icon='el-icon-delete'
              circle
              plain
              @click="delTableRow(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格部分 -->
      <!-- /卡片视图主体区域 -->
      <!-- 卡片视图底部区域 -->
      <!-- 分页部分 -->
      <el-pagination
        background
        layout='prev, pager, next, sizes , jumper'
        :total='parseInt(total)'
        :page-sizes='[20, 30, 50, 100]'
        @size-change='pageSizeChange($event)'
        @current-change='currentPageChange($event)'
      >
      </el-pagination>
      <!-- 分页部分 -->
      <!-- 卡片视图底部区域 -->
    </el-card>
    <!-- 题目预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="70%">
      <questions-preview
        @close="previewDialogVisible = false"
        :dataId="this.dataId"
        v-if="previewDialogVisible"
      />
    </el-dialog>
    <!-- /题目预览对话框 -->
  </div>
</template>

<script>
// 导入 请求组题列表数据 的方法
import { randoms, removeRandoms } from '@/api/hmmm/questions'
// 引入 对话框组件
import QuestionsPreview from '../components/questions-preview'

export default {
  name: 'ZuTiLieBiao',
  components: {
    QuestionsPreview
  },
  created () {
    this.loadTableData()
  },
  data () {
    return {
      // 请求到的 总数据条数
      total: '',
      queryInfo: {
        // 当前默认要请求的页码值
        page: 1,
        // 当前默认每页请求的数据条数
        pagesize: 20,
        keyword: ''
      },
      tableData: [],
      previewDialogVisible: false,
      // 自定义一个题目id
      dataId: ''
    }
  },
  methods: {
    // 监听 清除按钮 的点击事件
    clearKeyword () {
      this.queryInfo.keyword = ''
    },
    async loadTableData () {
      try {
        const { data: res } = await randoms(this.queryInfo)
        // console.log(res)
        this.total = res.counts
        this.tableData = res.items
        // console.log(this.tableData)
      } catch (error) {
        console.log(error)
        this.$message.error('获取组题列表信息失败，请稍后重试！')
      }
    },
    // 监听 分页区域每页显示条数变化 的事件
    pageSizeChange (currentPageSize) {
      // console.log(currentPageSize)
      this.queryInfo.pagesize = currentPageSize
      this.loadTableData()
    },
    // 监听 分页区域当前页码变化 的事件
    currentPageChange (currentPage) {
      // console.log(currentPage)
      this.queryInfo.page = currentPage
      this.loadTableData()
    },
    // ******重难点：拿到 当前被点击的题目的id值，并保存到 data 中，方便后续进行组件传值
    // 监听 题目编号链接 的点击事件
    openlinks (id) {
      this.previewDialogVisible = true
      this.dataId = id
    },
    // 监听 删除按钮 的点击事件，删除表格内指定的某一行的数据
    async delTableRow (RowId) {
      // console.log(RowId)
      const deleteConfirm = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      if (deleteConfirm !== 'confirm') {
        return this.$message('已取消本次操作')
      }
      try {
        await removeRandoms({ id: RowId })
        this.loadTableData()
        this.$message.success('删除数据成功！')
      } catch (error) {
        this.$message.error('删除数据失败，请稍后重试！')
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
  .el-form-item {
     ::v-deep .el-form-item__label {
      width: 80px;
      line-height: 32px
      }
     ::v-deep .el-form-item__content {
      margin-left: 80px;
      line-height: 32px
      }
  }
   ::v-deep .header-right {
    text-align: right
  }
   ::v-deep .el-alert {
    margin-bottom: 15px
  }
   ::v-deep .el-pagination {
    margin-top: 20px;
    text-align: right
  }
  .link {
    color: #0099ff
  }
}
</style>
